<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.cityExpire_delete"
                   @click="handleDelete">删 除
        </el-button>
      
      </template>
       <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          icon="el-icon-phone-outline"
          size="small"
          @click.stop="handleReplay(scope.row,scope.index)"
          v-if="scope.row.dealStatus=='1'"
        >回复
        </el-button>
        <el-button
          type="text"
          icon="el-icon-odometer"
          size="small"
          @click.stop="handleHasten(scope.row,scope.index)"
          v-if="scope.row.dealStatus=='1'"
        >催办
        </el-button>
        <el-button
          type="text"
          icon="el-icon-finished"
          size="small"
          @click.stop="handleOldOrder(scope.row,scope.index)"
          v-if="scope.row.receiveTimes>0 "
        >历史单
        </el-button>
       </template>
      <template slot-scope="{row}"
                slot="urgencyDegree">
        <el-tag>{{row.urgencyDegree}}</el-tag>
      </template>
    </avue-crud>
   <!-- 回复 -->
    <el-dialog title="工单回复"
                   append-to-body
                   :visible.sync="replayShow"
                   width="50%">
    <el-form ref="ReplayForm" :rules="rules" :model="replayForm" label-width="180px" size="mini">
     <el-card shadow="hover">
        <el-row>
          <el-col :span="24">
            <el-form-item label="工单号：" >
               <el-input :disabled="true" name="workId"  v-model="replayForm.workId"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接收时间：">
                {{ replayForm.receiptTime }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="问题描述：">
               {{ replayForm.problemDescription }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="工单附件：">
              空
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="转办意见：">
               {{ replayForm.administrativeOpinions }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="回复时限：">
                {{ replayForm.timeLimit }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="联系人：">
               {{ replayForm.contact }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="联系电话：">
               {{ replayForm.contactPhone }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="地址：">
               {{ replayForm.address }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="紧急程度：">
               {{ replayForm.urgencyDegree }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="是否保密：">
                {{ replayForm.confidentiality }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="是否回复：">
              {{ replayForm.replyFlag }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="办理轨迹：">
               {{ replayForm.handlerTrack }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="转办人：">
              {{ replayForm.administrativePerson }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="受理类型：">
              {{ replayForm.accessType }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="受理员：">
              {{ replayForm.acceptorName }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="受理员工号：">
              {{ replayForm.acceptorNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="录入时间：">
              {{ replayForm.inputTime }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="信息来源：">
              {{ replayForm.messageSource }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="分类：">
              {{ replayForm.classify }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="工单类型：">
              {{ replayForm.workOrderType }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="操作记录：" style="white-space: pre-wrap">
              {{ historyDetail }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="分派意见：">
              {{  replayForm.assignOpinion }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="操作类型：" prop="doneType">
              <el-radio-group v-model="replayForm.doneType" @change="stChangeHandler">
                <el-radio :label="2">回复</el-radio>
                <el-radio :label="1">转派</el-radio>
                <el-radio :label="3">回退</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
           <el-col :span="24"  v-if="replayForm.doneType=='2'">
            <el-form-item label="回复使用电话：" prop="answerPhone">
              <el-input  v-model="replayForm.answerPhone"/>
            </el-form-item>
          </el-col>
           <el-col :span="24"   v-if="replayForm.doneType=='2'">
            <el-form-item label="回复时间："  prop="responseTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="replayForm.responseTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
           <el-col :span="24"  v-if="replayForm.doneType=='2'">
            <el-form-item label="被接电话与当事人关系："  prop="relation">
              <el-input  v-model="replayForm.relation"/>
            </el-form-item>
          </el-col>
           <el-col :span="24"  v-if="replayForm.doneType=='2'" >
              <el-form-item label="当事人满意度：" prop="satisfaction">
                <el-select v-model="replayForm.satisfaction" style="width: 100%;" >
                  <el-option label="满意" value="1"></el-option>
                  <el-option label="基本满意" value="2"></el-option>
                  <el-option label="不满意" value="3"></el-option>
                  <el-option label="当事人联系不上" value="4"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
           <el-col :span="24" v-if="replayForm.doneType=='2'">
            <el-form-item label="办理情况："  prop="responseReason">
              <el-input  type="textarea" v-model="replayForm.responseReason"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="replayForm.doneType=='2'" >
            <el-form-item label="回复依据："  prop="responseBaseOn">
              <el-input  type="textarea" v-model="replayForm.responseBaseOn"/>
            </el-form-item>
          </el-col>
           <el-col :span="24" v-if="replayForm.doneType =='2'" >
            <el-form-item label="回复市民内容：" prop="responseToPeople">
              <el-input  type="textarea" v-model="replayForm.responseToPeople"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="replayForm.doneType=='2'" >
            <el-form-item label="是否考核：" prop="sfkh">
               <el-radio-group v-model="replayForm.sfkh">
                <el-radio label="y">是</el-radio>
                <el-radio label="n">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
           <el-col :span="24"  v-if="replayForm.sfkh=='n' && replayForm.doneType=='2'">
              <el-form-item label="不考核类型：" prop="bkhlx">
                <el-select v-model="replayForm.bkhlx" style="width: 100%;" >
                  <el-option label="信访号" value="1"></el-option>
                  <el-option label="出警号" value="2"></el-option>
                  <el-option label="司法号" value="3"></el-option>
                  <el-option label="司法调解号" value="4"></el-option>
                  <el-option label="不符合政策类" value="5"></el-option>
                  <el-option label="来电人诉求属不合理诉求" value="6"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
           <el-col :span="24" v-if="replayForm.sfkh=='n' && replayForm.doneType=='2'">
            <el-form-item label="不考核理由："  prop="bkhly">
              <el-input  type="textarea" v-model="replayForm.bkhly"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="replayForm.doneType=='2'" >
            <el-form-item label="文件上传：" >
              
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- <el-form-item label="转派部门：" v-if="toFlag" prop="toDeptId">
              <el-input   v-model="replayForm.toDeptId"/>
            </el-form-item> -->
            <el-form-item label="转派部门" v-if="toFlag" prop="toDeptId">
              <el-select v-model="replayForm.toDeptId" clearable  placeholder="请选择">
                <el-option
                  v-for="item in toDeptList"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value">
                </el-option>
              </el-select>
             </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="转派原因：" v-if="toFlag" prop="resason">
              <el-input  type="textarea" v-model="replayForm.resason"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="回退部门：" v-if="backFlag" prop="backDept">
              <el-input   v-model="replayForm.backDept"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="回退原因：" v-if="backFlag" prop="backReason">
              <el-input  type="textarea" v-model="replayForm.backReason"/>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
              <el-form-item class="align-text:center">
                <el-button type="primary" @click="handleRelaySave('ReplayForm')">保存</el-button>
                <el-button @click="handleCancel('ReplayForm')">关闭</el-button>
              </el-form-item>
         </el-row>
      </el-card>
     </el-form>
    </el-dialog>
    <!--超时回退单-->
    <el-dialog title="超时回退单"
                   append-to-body
                   :visible.sync="backTimeBoxShow"
                   width="50%">
    <el-form ref="BackTimeForm" :rules="rules" :model="backTimeForm" label-width="180px" size="mini">
     <el-card shadow="hover">
        <el-row>
          <el-col :span="24">
            <el-form-item label="工单号：" >
            {{backTimeForm.workId}}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接收时间：">
                {{ backTimeForm.receiptTime }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="问题描述：">
               {{ backTimeForm.problemDescription }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="工单附件：">
              空
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="转办意见：">
               {{ backTimeForm.administrativeOpinions }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="回复时限：">
                {{ backTimeForm.timeLimit }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="联系人：">
               {{ backTimeForm.contact }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="联系电话：">
               {{ backTimeForm.contactPhone }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="地址：">
               {{ backTimeForm.address }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="紧急程度：">
               {{ backTimeForm.urgencyDegree }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="是否保密：">
                {{ backTimeForm.confidentiality }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="是否回复：">
              {{ backTimeForm.replyFlag }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="办理轨迹：">
               {{ backTimeForm.handlerTrack }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="转办人：">
              {{ backTimeForm.administrativePerson }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="受理类型：">
              {{ backTimeForm.accessType }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="受理员：">
              {{ backTimeForm.acceptorName }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="受理员工号：">
              {{ backTimeForm.acceptorNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="录入时间：">
              {{ backTimeForm.inputTime }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="信息来源：">
              {{ backTimeForm.messageSource }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="分类：">
              {{ backTimeForm.classify }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="工单类型：">
              {{ backTimeForm.workOrderType }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="分派意见：">
              {{  backTimeForm.assignOpinion }}
            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="操作记录：" style="white-space: pre-wrap">
              {{ historyDetail }}
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
              <el-form-item class="align-text:center">
                <el-button @click="handleBackTimeCancel()">关闭</el-button>
              </el-form-item>
         </el-row>
      </el-card>
     </el-form>
    </el-dialog>
     <!--催办-->
    <el-dialog title="工单催办"
                   append-to-body
                   :visible.sync="hastenBoxShow"
                   width="35%">
    <el-form ref="HasTenForm" :rules="rules" :model="hastenForm" label-width="180px" size="mini">
     <el-card shadow="hover">
        <el-row>
          <el-col :span="24">
            <el-form-item label="工单号：" >
            {{hastenForm.workId}}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="催办信息：" prop="resason">
              <el-input  type="textarea" v-model="hastenForm.resason"/>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
              <el-form-item class="align-text:center">
                <el-button type="primary" @click="handleHastenSave('ReplayForm')">保存</el-button>
                <el-button @click="handleHastenCancel('HasTenForm')">关闭</el-button>
              </el-form-item>
         </el-row>
      </el-card>
     </el-form>
    </el-dialog>
    <!--历史工单-->
     <el-dialog title="历史工单"
                   append-to-body
                   :visible.sync="oldOrderBoxShow"
                   width="80%">
        <el-table
                  :data="oldOrderData"
                  border
                  style="width: 100%">
                  <el-table-column
                    fixed
                    type="index"
                    label="序号"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    prop="workId"
                    label="工单号"
                    width="160">
                  </el-table-column>
                  <el-table-column
                    prop="receiptTime"
                    label="接收时间"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="problemDescription"
                    label="问题描述"
                    show-overflow-tooltip = "true"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="administrativeOpinions"
                    label="转办意见"
                    show-overflow-tooltip = "true"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="timeLimit"
                    label="转办时限"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="contact"
                    label="联系人"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="contactPhone"
                    label="联系电话"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="urgencyDegree"
                    label="紧急程度"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="replyFlag"
                    label="是否回复"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="classify"
                    label="分类"
                    show-overflow-tooltip = "true"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="workOrderType"
                    label="工单类型"
                    width="120">
                  </el-table-column>
                   <el-table-column
                    prop="administrativePerson"
                    label="转办人"
                    width="160">
                  </el-table-column>
                   <el-table-column
                    prop="accessType"
                    label="受理类型"
                    width="120">
                  </el-table-column>
                   <el-table-column
                    prop="inputTime"
                    label="录入时间"
                    width="180">
                  </el-table-column>
                  <!-- <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                      <el-button type="text" size="small">编辑</el-button>
                    </template>
                  </el-table-column> -->
      </el-table>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, remove} from "@/api/govsvc/cityExpire";
  import {
          getReplayDetail,
          replaySave,
          backTimeSave,
          getOldOrderList,
          hastenSave
          } from "@/api/govsvc/citywork";
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        form: {},
        TimeOutFlag: '',//工单处理--是否超时标志
        backTimeOut: '',//工单处理--是否为回退工单
         //回复from
        replayForm: {
          doneType: 2
        },
        //超时回退单form
        backTimeForm: {

        },
        //催办Form
        hastenForm:{

        },
        //处理明细拼接字符串
        historyDetail: '',
        //分配部门列表加载（工单处理--转派）
        toDeptList: [],
         //历史单列表数据
        oldOrderData: [],
         //Form表单校验
        rules: {
          answerPhone: [
            { required: true, message: '请输入回复使用电话', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          doneType: [
            { required: true, message: '请选择操作类型', trigger: 'blur' }
          ],
          responseTime: [
            {required: true, message: '请选择回复时间', trigger: 'blur' }
          ],
          relation: [
            { required: true, message: '请输入被接电话与当事人关系', trigger: 'blur' }
          ],
           satisfaction: [
            { required: true, message: '请选择当事人满意度', trigger: 'blur' }
          ],
           responseReason: [
            { required: true, message: '请输入办理情况', trigger: 'blur' }
          ],
           responseToPeople: [
            { required: true, message: '请输入回复市民内容', trigger: 'blur' }
          ],
           sfkh: [
            { required: true, message: '请选择是否考核', trigger: 'blur' }
          ],
          toDeptId: [
            { required: true, message: '请选择转派部门', trigger: 'blur' }
          ],
          resason: [
            { required: true, message: '请输入转派原因', trigger: 'blur' }
          ],
          backDept: [
            { required: true, message: '请输入回退部门', trigger: 'blur' }
          ],
          backReason: [
            { required: true, message: '请输入原因', trigger: 'blur' }
          ],
          bkhlx: [
            { required: true, message: '请选择不考核类型', trigger: 'blur' }
          ],
          bkhly: [
            { required: true, message: '请输入不考核理由', trigger: 'blur' }
          ],
        },
        replayShow: false,//回复处理窗口显示
        replayFlag: true,//处理 回复标志
        toFlag: false,//处理转派标志
        backFlag: false,//处理 回退标志
        backTimeBoxShow: false,//超时回退单窗口显示
         oldOrderBoxShow: false,//历史单窗口显示
         hastenBoxShow: false,//显示催办窗口
        excelBox: false,
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          indexLabel:'序号',
          height: 'auto',
          calcHeight: 30,
          dialogWidth: 850,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: false,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          selection: true,
          excelBtn: false,
          dialogClickModal: false,
          column: [
            {
              label: "工单号",
              prop: "workId",
              type: "input",
              search: true,
              minWidth: 120,
            },
            {
              label: "接收时间",
              prop: "receiptTime",
              type: "date",
              readonly: true,
              disabled:true,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
            },
            {
              label: "问题描述",
              prop: "problemDescription",
              type: "input",
                overHidden: true,
            },
            {
              label: "转办意见",
              prop: "administrativeOpinions",
              type: "input",
              hide: true,
            },
            {
              label: "转办时限",
              prop: "timeLimit",
              type: "date",
              readonly: true,
              disabled:true,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
             
            },
            {
              label: "联系人",
              prop: "contact",
              type: "input",
            },
            {
              label: "联系电话",
              prop: "contactPhone",
              type: "input",
            },
          
            {
              label: "紧急程度",
              prop: "urgencyDegree",
              type: "input",
              slot: true,
            },
         
            {
              label: "是否回复",
              prop: "replyFlag",
              type: "input",
            },
            {
              label: "分类",
              prop: "classify",
              type: "select",
              hide: true,
            },
            {
              label: "工单类型",
              prop: "workOrderType",
              type: "input",
            },
            {
              label: "工单录入次数",
              prop: "receiveTimes",
              type: "input",
              hide: true,
            },
            {
              label: "是否存在附件",
              prop: "hasFile",
              type: "input",
              hide: true,
            },
            {
              label: "分配单位",
              prop: "deptId",
              type: "select",
              search: true,
              readonly: true,
              disabled:true,
              dicUrl: "/api/smart-system/dept/getDeptList",
              span: 8,
              props: {
                label: "title",
                value: "key"
              },
            },
            {
              label: "工单状态",
              prop: "dealStatus",
              type: "select",
              dicData: [
                {
                  label: "未分配",
                  value: "0"
                },
                {
                  label: "已分配",
                  value: "1"
                },
                {
                  label: "已处理",
                  value: "2"
                }
              ],
            },
            {
              type: "daterange",
              label: "接收时间",
              span: 8,
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd",
              prop: "receiptTimeRange",
              searchRange: true,
              hide: true,
              addDisplay: false,
              editDisplay: false,
              viewDisplay: false,
              search: true,
            },
          ]
        },
        data: [],
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.cityExpire_add, false),
          viewBtn: this.vaildData(this.permission.cityExpirek_view, false),
          delBtn: this.vaildData(this.permission.cityExpire_delete, false),
          editBtn: this.vaildData(this.permission.cityExpire_edit, false)
        };
      },
      workIds() {
        let workIds = [];
        this.selectionList.forEach(ele => {
          workIds.push(ele.workId);
        });
        return workIds.join(",");
      }
    },
    methods: {
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.workId);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.workIds);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      //回复工单
       handleReplay(row) {
         getReplayDetail(row.workId).then(res => {
         console.log(res.data.data);
         
          this.backTimeOut = res.data.data.backTimeOut;
          this.TimeOutFlag = res.data.data.TimeOutFlag;
          this.historyDetail = res.data.data.historyDetail;
          if(res.data.data.backTimeOut=='0'){//超时回退单
              this.backTimeForm = res.data.data.citywork;
              this.backTimeBoxShow = true;

          }else{//正常处理工单
              this.replayForm = res.data.data.citywork;
              this.replayShow = true;
              if(res.data.data.citywork.replyFlag.includes("不回复")) {
                  console.log("不回复");
                  //工单为不回复时，设置当事人满意度为：联系不到当事人
                  this.replayForm.satisfaction='4';
              }
          }
         });
      },
      //保存回复
      handleRelaySave(form,done,loading) {

          this.$refs[form].validate((valid) => {
            if (!valid){
              console.log('error submit!!');
              return false;
            }else{
                  console.log(this.replayForm.doneType);
                  var doneType = this.replayForm.doneType;
                  console.log(doneType);
                  if(doneType=='3'){//提交回退
                        console.log(this.TimeOutFlag);
                              if(this.TimeOutFlag){
                                    this.$confirm('该工单已超过回退期限，如坚持回退，将计入考核，请问是否继续申请回退？', '提示', {
                                      confirmButtonText: '确定',
                                      cancelButtonText: '取消',
                                      type: 'warning'
                                    }).then(() => {//超时回退
                                    
                                      console.log("超时提交回退");
                                        let form = null;
                                        form = this.replayForm;
                                        const params = form;
                                        backTimeSave(params).then(() => {
                                            this.onLoad(this.page);
                                            this.$message({
                                              type: "success",
                                              message: "超时回退成功!"
                                            });
                                            this.replayShow = false;
                                            this.onLoad(this.page);
                                          }, error => {
                                            loading();
                                            window.console.log(error);
                                          });
                                    }).catch(() => {
                                      this.$message({
                                        type: 'info',
                                        message: '取消回退'
                                      });          
                                    });
                              }else{//正常回退
                                    console.log("正常提交回退");
                                        let form = null;
                                        form = this.replayForm;
                                        const params = form;
                                        replaySave(params).then(() => {
                                            this.onLoad(this.page);
                                            this.$message({
                                              type: "success",
                                              message: "正常回退成功!"
                                            });
                                            this.replayShow = false;
                                            this.onLoad(this.page);
                                          }, error => {
                                            loading();
                                            window.console.log(error);
                                          });
                              }
                          }else if(doneType=='1'){//提交转派
                                if(this.TimeOutFlag){
                                    this.$confirm('该工单已超过转派期限，如坚持转派，将计入考核，请问是否继续申请转派？', '提示', {
                                      confirmButtonText: '确定',
                                      cancelButtonText: '取消',
                                      type: 'warning'
                                    }).then(() => {
                                      console.log("超时提交转派");
                                        let form = null;
                                        form = this.replayForm;
                                        const params = form;
                                        replaySave(params).then(() => {
                                            this.onLoad(this.page);
                                            this.$message({
                                              type: "success",
                                              message: "超时转派成功!"
                                            });
                                            this.replayShow = false;
                                            this.onLoad(this.page);
                                          }, error => {
                                            loading();
                                            window.console.log(error);
                                          });
                                    }).catch(() => {
                                      this.$message({
                                        type: 'info',
                                        message: '取消转派'
                                      });          
                                    });
                                }else{//正常提交转派
                                        console.log("正常提交转派");
                                        let form = null;
                                        form = this.replayForm;
                                        const params = form;
                                        replaySave(params).then(() => {
                                            this.onLoad(this.page);
                                            this.$message({
                                              type: "success",
                                              message: "正常转派成功!"
                                            });
                                            this.replayShow = false;
                                            this.onLoad(this.page);
                                          }, error => {
                                            loading();
                                            window.console.log(error);
                                          });
                                }
                          }else{//提交回复
                            console.log("提交回复");
                            let form = null;
                            form = this.replayForm;
                            const params = form;
                             replaySave(params).then(() => {
                                this.onLoad(this.page);
                                this.$message({
                                  type: "success",
                                  message: "保存成功!"
                                });
                                //done();
                                this.replayShow = false;
                                this.onLoad(this.page);
                              }, error => {
                                loading();
                                window.console.log(error);
                              });
                          }
            }
          });     
      },//回复处理结束
      //工单催办
      handleHasten(row) {
        this.hastenBoxShow = true;
        this.hastenForm.workId = row.workId;
        
      },
      //工单催办保存
       handleHastenSave( done, loading) {
          let form = null;
          form = this.hastenForm;
          const params = form;
            hastenSave(params).then(() => {
              this.onLoad(this.page);
              this.$message({
                type: "success",
                message: "保存催办成功!"
              });
              this.hastenBoxShow = false;
              this.onLoad(this.page);
            }, error => {
              loading();
              window.console.log(error);
            });
       },
      //历史单列表显示
      handleOldOrder(row){
          console.log(row.workId);
          this.oldOrderBoxShow = true;
          getOldOrderList(row.workId).then(res => {
            const data = res.data.data;
            this.oldOrderData = data;
          });


      },
      //回复弹出层关闭
      handleCancel(FormName){
        this.replayShow = false;
        this.$refs[FormName].resetFields();
      },
      //关闭超时回退单弹出层
      handleBackTimeCancel(){
        this.backTimeBoxShow = false;
      },
      //关闭催办窗口
      handleHastenCancel(FormName){
        this.hastenBoxShow = false;
        this.$refs[FormName].resetFields();
      },
      beforeOpen(done) {
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
          const {receiptTimeRange} = params;
        let values = {
          ...params,
        };
        if (receiptTimeRange) {
          values = {
            ...params,
             receiptTimeDatege: receiptTimeRange[0],
             receiptTimeDatelt: receiptTimeRange[1],
          };
          values.receiptTimeRange = null;
          this.query.receiptTimeRange = null;
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(values, this.query)).then(res => {
          console.log(res.data.data);
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>
<style>
  .box {
    height: 800px;
  }

  .el-scrollbar {
    height: 100%;
  }

  .box .el-scrollbar__wrap {
    overflow: scroll;
  }
</style>